<template>
  <!-- 中介订单详情 -->
  <el-dialog @close="close" class="pick-dialog" title="中介订单详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
    <div class="form-box">
      <div class="order-info flex">
        <span>来源链接： {{ruleForm.outLinkBackName}}</span>
        <span>创建时间： {{ruleForm.createTime}}</span>
      </div>

      <el-descriptions title="账号信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="游戏名称">{{ruleForm.gameName}}</el-descriptions-item>
        <el-descriptions-item label="区服">{{ruleForm.region}}</el-descriptions-item>
        <el-descriptions-item label="实名" v-if="ruleForm.relname">{{ruleForm.relname}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{ruleForm.accountNumber}}</el-descriptions-item>
        <el-descriptions-item label="手机号" :span="3">{{ruleForm.contactPhone}}</el-descriptions-item>
        <el-descriptions-item label="简介" :span="3">
          <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{ruleForm.des || '---'}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="截图" :span="3">
          <img-box width="50px" :img="ruleForm.img" :height="50"></img-box>
        </el-descriptions-item>
        <el-descriptions-item label="实名截图" :span="3">
          <img-box width="50px" :img="ruleForm.relnameImg" :height="50"></img-box>
        </el-descriptions-item>
      </el-descriptions>
      <div class="center" >
        <el-button @click="close('ruleForm')">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ImgBox from "../../../components/imgBox.vue";
export default {
  name: "InterOrderDetail",
  components: { ImgBox },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {},
      guaranteeInfo: null,
    };
  },
  methods: {
    open(row) {
      this.ruleForm = row || {};
      this.loading = false;

      // 解析包赔资料
      if (this.ruleForm.compensationMaterials) {
        try {
          this.guaranteeInfo = JSON.parse(this.ruleForm.compensationMaterials);
        } catch (e) {
          this.guaranteeInfo = null;
        }
      } else {
        this.guaranteeInfo = null;
      }
      if (row.compensationMaterials) {
        this.guaranteeInfo = JSON.parse(row.compensationMaterials);
        let arr = [];
        if (this.guaranteeInfo.emblemIdcardImg) {
          arr.push(this.guaranteeInfo.emblemIdcardImg);
        }
        if (this.guaranteeInfo.faceIdcardImg) {
          arr.push(this.guaranteeInfo.faceIdcardImg);
        }
        if (this.guaranteeInfo.handIdcardImg) {
          arr.push(this.guaranteeInfo.handIdcardImg);
        }
        if (this.guaranteeInfo.img) {
          const arr2 = JSON.parse(this.guaranteeInfo.img);
          if (arr2 && arr2.length) {
            arr2.forEach((r) => {
              if (r.url) {
                arr.push(r.url);
              }
            });
          }
        }
        this.baopeiImgs = arr;
      }
      this.dialogVisible = true;
    },
    review(ind) {
      this.$viewerApi({
        images: this.baopeiImgs,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    // 状态文本和类型映射方法
    orderStatusText(val) {
      const map = { 1: "交易中", 2: "交易取消", 3: "交易完成" };
      return map[val] || "-";
    },
    orderStatusType(val) {
      switch (val) {
        case 1:
          return "warning"; // 交易中
        case 2:
          return "danger"; // 交易取消
        case 3:
          return "success"; // 交易完成
        default:
          return "info";
      }
    },

    changeBindText(val) {
      const map = { 1: "未换绑", 2: "已换绑" };
      return map[val] || "-";
    },
    changeBindType(val) {
      switch (val) {
        case 2:
          return "success"; // 换绑complete

        case 1:
          return "info"; // 未换绑
        default:
          return "info";
      }
    },

    payStatusText(val) {
      const map = { 1: "未支付", 2: "已支付", 3: "支付失败" };
      return map[val] || "-";
    },
    payStatusType(val) {
      switch (val) {
        case 2:
          return "success"; // 已支付
        case 1:
          return "info"; // 未支付
        case 3:
          return "danger"; // 支付失败
        default:
          return "info";
      }
    },

    loanStatusText(val) {
      const map = { 1: "未放款", 2: "已放款", 3: "放款失败" };
      return map[val] || "-";
    },
    loanStatusType(val) {
      switch (val) {
        case 2:
          return "success"; // 已放款
        case 1:
          return "info"; // 未放款
        case 3:
          return "danger"; // 放款失败
        default:
          return "info";
      }
    },

    contractStatusText(val) {
      const map = { 1: "未生成", 2: "已生成", 3: "已签署", 4: "已作废" };
      return map[val] || "-";
    },
    contractStatusType(val) {
      switch (val) {
        case 3:
          return "success"; // 已签署
        case 2:
          return "warning"; // 已生成
        case 4:
          return "danger"; // 已作废
        case 1:
          return "info"; // 未生成
        default:
          return "info";
      }
    },

    afterStatusText(val) {
      const map = { 1: "无售后", 2: "售后中", 3: "售后完成", 4: "售后关闭" };
      return map[val] || "-";
    },
    afterStatusType(val) {
      switch (val) {
        case 3:
          return "success"; // 售后完成
        case 2:
          return "warning"; // 售后中
        case 4:
          return "danger"; // 售后关闭
        case 1:
          return "info"; // 无售后
        default:
          return "info";
      }
    },

    groupStatusText(val) {
      const map = { 1: "未拉群", 2: "已拉群", 3: "已解散" };
      return map[val] || "-";
    },
    groupStatusType(val) {
      switch (val) {
        case 2:
          return "success"; // 已拉群
        case 1:
          return "info"; // 未拉群
        case 3:
          return "danger"; // 已解散
        default:
          return "info";
      }
    },

    formatMoney(n) {
      if (n === 0) return "0.00";
      if (!n) return "---";
      return Number(n).toFixed(2);
    },

    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  padding: 15px;
  // width: 1000px;
  .img-box {
    flex-wrap: wrap;
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}

.price-box {
  text-align: right;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-right: 20px;
}
.payway-box {
  justify-content: flex-end;
}
.payway-item {
  width: 150px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 5px 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 3px;
  }
  &.active {
    border: 2px solid #f7423f;
    .icon {
      color: #f7423f;
      display: block;
    }
  }
}

.sfk {
  text-align: right;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;

  .txt {
    font-size: 26px;
    color: #ff0000;
    margin-left: 5px;
  }
}

.demo-ruleForm {
  padding-right: 20px;
}

.center {
  text-align: right;
  padding-top: 15px;
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
